<template>
    <el-form v-if="app" label-position="left" size="mini" label-width="80px" action="javascript:void(-1)">
        <el-form-item label="名称">
            <el-input :value="app.name" @input="itemChange('name', $event)" @keyup.enter="prevent"></el-input>
        </el-form-item>
        <el-form-item label="背景">
            <el-popover placement="left-end" title="选择图像" trigger="click">
                <res-selector @itemSelect="itemSelect('background', $event)"/>
                <el-button slot="reference">
                    <img v-if="app.background" :src="'/api' + app.background" width="100%">
                    <div v-if="!app.background">选择图片</div>
                </el-button>
            </el-popover>
        </el-form-item>
        <el-form-item label="提示内容">
            <!-- <el-popover placement="left" title="内容" width="600" trigger="click">
                <editor v-model="app.tips"></editor>
                <el-button slot="reference">富文本编辑</el-button>
            </el-popover> -->
            <el-input
                type="textarea"
                autosize
                :value="app.tips"
                @input="itemChange('tips', $event)"
                :rows="3"
            ></el-input>
        </el-form-item>
        <h4>事件</h4>
        <el-collapse v-model="eventType" accordion>
            <el-collapse-item
                v-for="type in eventTypes"
                :key="type.value"
                :title="type.label"
                :name="type.value"
            >
                <event-config
                    :items="app.items"
                    :name="type.value"
                    :item="app"
                    update="updateActivedApp"
                />
            </el-collapse-item>
        </el-collapse>
        <div style="text-align: center; padding-top: 10px">
            <el-popover placement="left" width="160" v-model="confirmDel">
                <p>确定删除此应用吗？</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="confirmDel = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="appDel">确定</el-button>
                </div>
                <el-button slot="reference" type="danger">删除此应用</el-button>
            </el-popover>
        </div>
    </el-form>
</template>
<script>
import Vue from 'vue'
import { mapGetters, mapActions, mapMutations, mapState } from 'vuex'
import vueTrix from 'vue-trix'
import resSelector from './resSelector'
import eventConfig from './eventConfig'

const eventTypes = [
    { label: '回车', value: 'keyup.enter' },
    { label: 'ctrl + 回车', value: 'keyup.ctrl.13' },
    { label: 'alt + C', value: 'keyup.alt.67' }
]

export default {
    name: 'app-config',
    data() {
        return {
            confirmDel: false,
            eventTypes,
            eventType: null
        }
    },
    components: { 'res-selector': resSelector, 'event-config': eventConfig, editor: vueTrix },
    computed: {
        ...mapState('course', ['apps', 'activedApp']),
        app() {
            return this.apps.find(app => app.name === this.activedApp)
        }
    },
    methods: {
        itemSelect(key, item) {
            Vue.set(this.app, key, item.fileUrl)
            this.$store.commit('course/updateActivedItem', this.app)
        },
        itemChange(key, value) {
            const { commit } = this.$store
            Vue.set(this.app, key, value)
            if (key === 'name') {
                commit('course/update', { activedApp: value })
            }
            commit('course/updateActivedApp', this.app)
        },
        appDel() {
            this.confirmDel = false
            this.$store.commit('course/delActivedApp', this.app)
        },
        prevent(e) {
            e.preventDefault()
            e.stopPropagation()
            return false
        }
    }
}
</script>
<style lang="less">
</style>


